<template>
	<div class="pay_detail">
		<div class="part mb0">
			<h2>本年您累计加分(分)</h2>
			<!-- <p class="up"><i class="ion ion-arrow-up-c"></i>128</p> -->
			<div ref="earnEchart" style="width:100%;height:28.2rem"></div>
		</div>
		<div v-if = "earnList.length>0 && earnDetailList.length<=0">
			<h3 class="plrEmpty ft15 line_height200">{{earnType}}</h3>
			<ul class="items">
				<li :class="['has_right_attach',{'has_right_arrow':list.time>0}]" v-for="list of earnList" @click="list.time>0 && displayDetail(list.score,list.type,list.status,list.name)"><span>{{list.name}}</span><span class="attach">{{list.time}}</span></li>
			</ul>
		</div>
		<div v-if ="earnDetailList.length>0" >
			<h3 class="plrEmpty ft15 line_height200">{{detailType}}<span class="ion ion-reply right ion_color_gray" @click="earnDetailList = []"></span></h3>
			<ul class="items" v-if="detailType!='周零违规' && detailType!='月零违规'">
				<li class="has_right_attach" v-for="list of earnDetailList"><span>{{list.content}}</span><span class="attach">{{list.happenDate}}</span></li>
			</ul>
			<ul class="items" v-else>
				<li :class="['has_right_attach',{'bright':!list.get}]" v-for="list of earnDetailList" ><span class="width45">{{list.content}}</span><span class="contentEarn">{{list.date}}</span><span v-if="list.reason !== 'true'" class="right">{{list.reason}}</span><span v-else class="ion ion-ios-rose"></span></li>
			</ul>
		</div>
	</div>
</template>
<script type="text/javascript">
	import getInterface from '../../assets/js/insterface'
	import echarts from 'echarts'
	import echartsOptions from '../../assets/js/performace/echartOption'

	export default{
		mixins: [echartsOptions],
		data(){
			return{
				'earnList':[],
				'earnType':'',
				'earnDetailList':[],
				'detailType':''
			}
		},
		mounted(){
			// document.title="年赚取";
			this.$el.parentElement.parentNode.style.background = '#fafafa';
			this.getEarnsData();
		},
		methods:{
			displayDetail(score,type,status,name){
				this.detailType = name;
				var detailUrl = getInterface.getBounsDetail+this.$route.query.empNo+'/'+score+'/'+type+'/'+status
				this.$http.get(detailUrl,{emulateJSON:true})
				.then((response)=>{
					console.log(response)
					if(response.data.length){
						this.earnDetailList = response.data;
					}
					
				})
			},
			getEarnsData(){
				let bonusChartByPersonalUrl = getInterface.getBonusChartByPersonalUrl + '/' + this.$route.query.empNo;

				let myChart = echarts.init(this.$refs.earnEchart);
				this.$http.get(bonusChartByPersonalUrl,{emulateJSON:true})
				.then((response) =>{
					console.log(response);
					let vue = this;
					// debugger;
					if(response.data.length>0){
						this.earnsOption.legend.data = response.data[0].name;
						this.earnsOption.yAxis[0].data = response.data[0].type;
						let datas = response.data[0].data;
						let dataLen = datas.length;
						for(let i=0;i<dataLen;i++){
							this.earnsOption.series[i].name = response.data[0].name[i];
							this.earnsOption.series[i].data = datas[i];
						}
						myChart.setOption(this.earnsOption);

						myChart.on('click',function(params){
							// console.log(params.name);
							switch(params.name){
								case '良好表现':
									// console.log("1-------"+params.name);
									vue.getEarnListData(1,params.name);
									break;
								case '优异表现':
									// console.log("2-------"+params.name);
									vue.getEarnListData(2,params.name);
									break;
								case '卓越表现':
									// console.log("3-------"+params.name);
									vue.getEarnListData(3,params.name);
									break;
								case '月零违规':
									// console.log("3-------"+params.name);
									vue.getEarnListData(4,params.name);
									break;
								default:
									console.log("0000-------"+params.name);
									vue.earnList = [];
							}
						})

					}
				})
			},
			getEarnListData(score,earnType){
				console.log(222)
				this.earnList=[];
				this.earnDetailList = [];
				let BonusDetailByPersonalUrl = getInterface.getBounsGroup;
				let params = {
					'empNo':this.$route.query.empNo,
					// 'empNo':'zhanry',
					'score':score
				}
				this.$http.get(BonusDetailByPersonalUrl + '/'+ params.empNo+ '/'+ params.score,{emulateJSON:true})
				.then((response)=>{
					// console.log(response);
					this.earnList = response.data;
					this.earnType = earnType;
				})		}
		}
	}
</script>
<style lang="scss" scoped>
	.has_right_attach{
		overflow: hidden;
		.width45{
			width: 19%;
		    display: inline-block;
		    overflow: hidden;
		    float: left;
		}
		.contentEarn{
			padding-left:1rem;
			width:54%;
			overflow:hidden;
			display:inline-block;
			float:left;
			box-sizing: border-box;
		}
		.ion-ios-rose{
			color: #FCC136;
		    font-size: 1.6rem;
		    float:right;
		    margin-right: 2rem;
		}	
	}
	.bright{
		color:#f56c41;
	}
	.right{
		float:right;
	}
	.ion_color_gray{
		color:#23a551;
		font-size:25px;
	}
</style>